<template>
	<view class="daily-check-container">
		<u-navbar title="日常检查" :is-back="true" back-icon-color="#ffffff" title-color="#ffffff" :background="{ background: '#1a4380' }"></u-navbar>
		
		<view class="check-form">
			<view class="form-group">
				<view class="form-title">基本信息</view>
				<view class="form-item">
					<text class="form-label">检查区域</text>
					<view class="form-input-wrap">
						<picker @change="onAreaChange" :value="areaIndex" :range="areaOptions">
							<view class="uni-input picker-input">{{ areaOptions[areaIndex] || '请选择检查区域' }}</view>
						</picker>
						<text class="iconfont icon-arrow-down"></text>
					</view>
				</view>
				<view class="form-item">
					<text class="form-label">检查日期</text>
					<view class="form-input-wrap">
						<picker mode="date" :value="checkDate" @change="onDateChange">
							<view class="uni-input picker-input">{{ checkDate || '请选择检查日期' }}</view>
						</picker>
						<text class="iconfont icon-calendar"></text>
					</view>
				</view>
			</view>
			
			<view class="form-group">
				<view class="form-title">检查项目</view>
				
				<view class="check-item" v-for="(item, index) in checkItems" :key="index">
					<view class="check-item-header">
						<text class="check-item-title">{{ item.title }}</text>
						<switch :checked="item.checked" @change="onSwitchChange($event, index)" color="#1a4380" />
					</view>
					<view class="check-item-desc">{{ item.description }}</view>
					
					<view class="check-item-upload" v-if="item.checked">
						<view class="upload-label">上传照片：</view>
						<view class="upload-box">
							<view class="upload-item" v-for="(img, imgIndex) in item.images" :key="imgIndex">
								<image :src="img" mode="aspectFill"></image>
								<view class="delete-icon" @click="deleteImage(index, imgIndex)">×</view>
							</view>
							<view class="upload-btn" @click="chooseImage(index)" v-if="item.images.length < 3">
								<text class="iconfont icon-camera"></text>
								<text class="upload-text">上传</text>
							</view>
						</view>
					</view>
					
					<view class="check-item-remark" v-if="item.checked">
						<text class="remark-label">备注：</text>
						<textarea class="remark-input" v-model="item.remark" placeholder="填写备注信息"></textarea>
					</view>
				</view>
			</view>
			
			<view class="submit-btn" @click="submitCheck">提交检查</view>
		</view>
		
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
export default {
	data() {
		return {
			areaOptions: ['教学楼', '宿舍楼', '食堂', '图书馆', '操场', '实验楼', '办公楼'],
			areaIndex: 0,
			checkDate: '',
			checkItems: [
				{
					title: '消防设施完好',
					description: '检查灭火器、消防栓等消防设施是否正常可用',
					checked: false,
					images: [],
					remark: ''
				},
				{
					title: '安全通道畅通',
					description: '确认安全出口、疏散通道无障碍物',
					checked: false,
					images: [],
					remark: ''
				},
				{
					title: '电气设备正常',
					description: '检查电线、插座、开关等电气设备无老化、破损现象',
					checked: false,
					images: [],
					remark: ''
				},
				{
					title: '门窗锁具完好',
					description: '检查门窗锁具是否完好可用',
					checked: false,
					images: [],
					remark: ''
				},
				{
					title: '公共区域卫生',
					description: '公共区域环境卫生是否整洁',
					checked: false,
					images: [],
					remark: ''
				}
			]
		};
	},
	onLoad() {
		// 设置当前日期
		const date = new Date();
		const year = date.getFullYear();
		const month = (date.getMonth() + 1).toString().padStart(2, '0');
		const day = date.getDate().toString().padStart(2, '0');
		this.checkDate = `${year}-${month}-${day}`;
	},
	methods: {
		// 选择区域
		onAreaChange(e) {
			this.areaIndex = e.detail.value;
		},
		
		// 选择日期
		onDateChange(e) {
			this.checkDate = e.detail.value;
		},
		
		// 切换检查项
		onSwitchChange(e, index) {
			this.checkItems[index].checked = e.detail.value;
		},
		
		// 选择图片
		chooseImage(index) {
			uni.chooseImage({
				count: 3 - this.checkItems[index].images.length,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera'],
				success: (res) => {
					this.checkItems[index].images = [...this.checkItems[index].images, ...res.tempFilePaths];
				}
			});
		},
		
		// 删除图片
		deleteImage(itemIndex, imageIndex) {
			this.checkItems[itemIndex].images.splice(imageIndex, 1);
		},
		
		// 提交检查
		submitCheck() {
			// 验证表单
			if (this.areaIndex === undefined) {
				this.$refs.uToast.show({
					type: 'error',
					message: '请选择检查区域'
				});
				return;
			}
			
			if (!this.checkDate) {
				this.$refs.uToast.show({
					type: 'error',
					message: '请选择检查日期'
				});
				return;
			}
			
			let hasCheckedItem = false;
			for (const item of this.checkItems) {
				if (item.checked) {
					hasCheckedItem = true;
					break;
				}
			}
			
			if (!hasCheckedItem) {
				this.$refs.uToast.show({
					type: 'error',
					message: '请至少完成一项检查'
				});
				return;
			}
			
			// 显示提交中
			uni.showLoading({
				title: '提交中...'
			});
			
			// 模拟提交请求
			setTimeout(() => {
				uni.hideLoading();
				
				uni.showToast({
					title: '提交成功',
					icon: 'success'
				});
				
				// 重置表单
				this.resetForm();
				
				// 返回上一页
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
			}, 1500);
		},
		
		// 重置表单
		resetForm() {
			this.areaIndex = 0;
			const date = new Date();
			const year = date.getFullYear();
			const month = (date.getMonth() + 1).toString().padStart(2, '0');
			const day = date.getDate().toString().padStart(2, '0');
			this.checkDate = `${year}-${month}-${day}`;
			
			for (const item of this.checkItems) {
				item.checked = false;
				item.images = [];
				item.remark = '';
			}
		}
	}
};
</script>

<style lang="scss">
.daily-check-container {
	min-height: 100vh;
	background-color: #f8f8f8;
	
	.check-form {
		padding: 20rpx;
	}
	
	.form-group {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		
		.form-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 30rpx;
			position: relative;
			padding-left: 20rpx;
			
			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: 6rpx;
				width: 6rpx;
				height: 30rpx;
				background-color: #1a4380;
				border-radius: 3rpx;
			}
		}
		
		.form-item {
			margin-bottom: 30rpx;
			
			.form-label {
				font-size: 28rpx;
				color: #333;
				margin-bottom: 15rpx;
				display: block;
			}
			
			.form-input-wrap {
				position: relative;
				
				.picker-input {
					height: 80rpx;
					background-color: #f8f8f8;
					border-radius: 8rpx;
					padding: 0 20rpx;
					font-size: 28rpx;
					display: flex;
					align-items: center;
				}
				
				.iconfont {
					position: absolute;
					right: 20rpx;
					top: 50%;
					transform: translateY(-50%);
					color: #999;
					font-size: 28rpx;
				}
			}
		}
	}
	
	.check-item {
		background-color: #f8f8f8;
		border-radius: 8rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		
		.check-item-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 10rpx;
			
			.check-item-title {
				font-size: 28rpx;
				font-weight: bold;
				color: #333;
			}
		}
		
		.check-item-desc {
			font-size: 26rpx;
			color: #666;
			margin-bottom: 20rpx;
		}
		
		.check-item-upload {
			margin-top: 20rpx;
			
			.upload-label {
				font-size: 26rpx;
				color: #333;
				margin-bottom: 15rpx;
			}
			
			.upload-box {
				display: flex;
				flex-wrap: wrap;
				
				.upload-item, .upload-btn {
					width: 160rpx;
					height: 160rpx;
					margin-right: 20rpx;
					margin-bottom: 20rpx;
					border-radius: 8rpx;
					overflow: hidden;
					position: relative;
				}
				
				.upload-item {
					image {
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
					
					.delete-icon {
						position: absolute;
						top: 0;
						right: 0;
						width: 40rpx;
						height: 40rpx;
						background-color: rgba(0, 0, 0, 0.5);
						color: #fff;
						font-size: 30rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
				
				.upload-btn {
					background-color: #fff;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					
					.iconfont {
						font-size: 50rpx;
						color: #999;
					}
					
					.upload-text {
						font-size: 24rpx;
						color: #999;
						margin-top: 10rpx;
					}
				}
			}
		}
		
		.check-item-remark {
			margin-top: 20rpx;
			
			.remark-label {
				font-size: 26rpx;
				color: #333;
				margin-bottom: 15rpx;
				display: block;
			}
			
			.remark-input {
				width: 100%;
				height: 160rpx;
				background-color: #fff;
				border-radius: 8rpx;
				padding: 20rpx;
				font-size: 28rpx;
				box-sizing: border-box;
			}
		}
	}
	
	.submit-btn {
		height: 88rpx;
		background: linear-gradient(to right, #1a4380, #2b6ac4);
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #FFFFFF;
		font-size: 32rpx;
		font-weight: bold;
		margin-top: 40rpx;
		margin-bottom: 40rpx;
		box-shadow: 0 6rpx 12rpx rgba(42, 102, 193, 0.2);
	}
}
</style> 